<!-- 通用信息模态框 -->

<template>
	<view class="modal-info">
		<!-- ref="popupDjy" :maskClick="false" @change="popupChange"  -->
		<u-popup :show="show" mode="center" round="20">
			
			<!-- 登录提示模态框 -->
			<focus-box width="600" :padding="[62,0,0,0]" mode="col" justify="start" align="center"
			bg="white" radius="20">
				
				<!-- 弹框图标 -->
				<focus-box width="78" height="78" radius="39"
				mode="col" justify="center" align="center" :bg="mode">
					<!-- 成功图标 -->
					<focus-icon v-if="mode=='success'" size="35" color="white" name="fi-tick"></focus-icon>
					<!-- 警告图标 -->
					<focus-icon v-else-if="mode=='warning'" size="40" color="white" name="fi-sigh"></focus-icon>
					<!-- 错误图标 -->
					<focus-icon v-else-if="mode=='error'" size="35" color="white" name="fi-cross"></focus-icon>
					<!-- 通用信息图标 -->
					<focus-icon v-else size="40" color="white" name="fi-info"></focus-icon>
				</focus-box>
				<focus-box width="100" height="30"></focus-box>
				
				<!-- 弹框标题 -->
				<focus-box v-if="title" width="510" mode="col" justify="center" align="center">
					<!-- 标题文字 -->
					<text style="font-size:42rpx; line-height:63rpx; color:#000000; font-weight:bold; text-align:center;"
					:decode="true">{{title}}</text>
					<!-- 顶部间隔 -->
					<focus-box width="100" height="50"></focus-box>
				</focus-box>
				
				<!-- 弹框内容容器 -->
				<focus-box v-if="content" width="510" mode="col" justify="center" align="center">
					<!-- 内容文字 -->
					<text style="font-size:32rpx; line-height:55rpx; color:#353535; text-align:center;"
					:decode="true">{{content}}</text>
					<!-- 间隔 -->
					<focus-box width="100" height="50"></focus-box>
				</focus-box>
				
				<!-- 弹框额外提示容器 -->
				<focus-box v-if="tips" width="510" mode="col" justify="center" align="center">
					<!-- 内容文字 -->
					<text style="font-size:28rpx; line-height:40rpx; color:#EA9200; text-align:center;"
					:decode="true">{{tips}}</text>
					<!-- 间隔 -->
					<focus-box width="100" height="50"></focus-box>
				</focus-box>
				
				
				<!-- 按钮栏顶部间隔线 -->
				<focus-line length="600" color="info-light"></focus-line>
				
				<!-- 按钮栏：有2个按钮的情况 -->
				<focus-box v-if="confirmText && cancelText"
				width="600" height="98" mode="row" justify="center">
					
					<!-- 左侧取消按钮 -->
					<focus-box width="298" height="98" mode="row" justify="center" align="center"
					@click="closeClick">
						<focus-text size="32" color="#9D9D9D" :text="cancelText"></focus-text>
					</focus-box>
					
					<!-- 按钮中间的间隔线 -->
					<!-- <focus-line direction="col" length="98" color="info-light"></focus-line> -->
					
					<!-- 右侧确定按钮 -->
					<focus-box width="298" height="98" mode="row" justify="center" align="center"
					@click="okClick">
						<focus-text size="32" :color="mode" :text="confirmText"></focus-text>
					</focus-box>
					
				</focus-box>
				
				<!-- 按钮栏：只有1个按钮的情况 -->
				<focus-box v-else
				width="600" height="98" mode="row" justify="center">
					
					<!-- 取消按钮 -->
					<focus-box v-if="cancelText"
					width="600" height="98" mode="row" justify="center" align="center"
					@click="closeClick">
						<focus-text size="32" color="#9D9D9D" :text="cancelText"></focus-text>
					</focus-box>
					
					<!-- 确定按钮 -->
					<focus-box v-else-if="confirmText"
					width="600" height="98" mode="row" justify="center" align="center"
					@click="okClick">
						<focus-text size="32" :color="mode" :text="confirmText"></focus-text>
					</focus-box>
					
				</focus-box>
				
				
			</focus-box>
			
		</u-popup>
	</view>
</template>


<script>
	/** 通用信息模态框
	 * @description 项目通用模态弹出框，杜先生开发
	 * @property {String} tag 组件标识，默认：modal-info
	 * @property {String} mode = [primary|success|warning|error] 弹框数据风格，默认：primary
	 *   @value primary 通用信息
	 *   @value success 成功信息
	 *   @value warning 警告信息
	 *   @value error 错误信息
	 * @property {String} title 标题文字
	 * @property {String} content 内容文字
	 * @property {String} tips 提示文字
	 * @property {String} confirmText 确定按钮的文字，默认：(空)
	 * @property {String} cancelText 取消按钮的文字，默认：我知道了
	 * @event {Function()} confirm 点击了确定按钮
	 * @event {Function()} cancel 点击了取消按钮
	 * @event {Function()} method_open $refs方法：弹出模态框
	 * @event {Function()} method_close $refs方法：关闭模态框
	 */
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
	
	export default {
		name: "modal-info",
		
		// 传递数据
		props: {
			"tag":{ type: String, default: 'modal-info' },
			"mode":{ type: String, default: 'primary' },
			"title":{ type: String, default: '' },
			"content":{ type: String, default: '' },
			"tips":{ type: String, default: '' },
			"confirmText":{ type: String, default: '' },
			"cancelText":{ type: String, default: '我知道了' },
		},
		
		// 页面数据
		data() {
			return {
				show: false,
				// 弹框关闭原因
				reason: '', // confirm-点击了确定  cancel-点击了取消
			}
		},
		
		// 页面事件
		methods: {
			
			// ======================================== 父级$refs调用方法
			// 显示弹出层
			open() {
				// this.$refs.popupDjy.open();
				this.show = true;
			},
			// 关闭弹出层
			close() {
				// this.$refs.popupDjy.close();
				this.show = false;
			},
			
			
			// ======================================== 数据处理
			// $emit回调事件
			callfunction() {
				// 如果没有原因，那么默认为“取消”
				if (this.reason == '') { this.reason = 'cancel'; }
				// 如果点击了确定
				if (this.reason == 'confirm') { this.$emit('confirm', { "tag": this.tag }); }
				// 如果点击了取消
				else if (this.reason == 'cancel') { this.$emit('cancel', { "tag": this.tag }); }
			},
			
			// 数据初始化
			dataInit() {
				// 让关闭原因回到空
				this.reason = '';
			},
			
			
			// ======================================== 页面事件
			// 弹出层状态 变换
			popupChange(objD) {
				// 回调信息
				this.callfunction();
				// 初始化
				this.dataInit();
			},
			
			// 关闭按钮 点击
			closeClick() {
				// 改变原因
				this.reason = 'cancel';
				// 关闭弹框
				this.close();
				this.$emit('cancel', { "tag": this.tag });
			},
			
			// 确定按钮 点击
			okClick() {
				// 改变原因
				this.reason = 'confirm';
				// 关闭弹框
				this.close();
				this.$emit('confirm', { "tag": this.tag });
			},
			
		},
	
	}
</script>
<style lang="less" scoped>
	// .modal-info {
	// 	/deep/ .u-safe-bottom,.u-safe-area-inset-bottom, .up-safe-area-inset-bottom {
	// 		padding-bottom: 0px !important;
	// 	}
	// }
</style>